<style>
    :root {
        --primary: #7F5AF0;
        --secondary: #2CB67D;
        --accent: #EF4565;
        --background: linear-gradient(45deg, #f8f9fa 0%, #e9ecef 100%);
        --text: #2B2C34;
    }

    body {
        width: 1440px;
        padding: 45px 20px;
        margin: 0 auto;
        font-family: 'Inter', system-ui, sans-serif;
        background: var(--background);
        min-height: 100vh;
        color: var(--text);
    }

    .header {
        text-align: center;
        margin-bottom: 60px;
    }

    h1 {
        color: var(--primary);
        font-size: 48px;
        letter-spacing: -2px;
        margin: 30px 0;
        text-align: center;
    }

    .card-container {
        display: grid;
        grid-template-columns: repeat(4, 300px);
        gap: 40px;
        padding: 15px;
        justify-content: center;
    }

    .card {
        background: white;
        border-radius: 20px;
        padding: 30px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        position: relative;
        width: 300px;
        height: 400px;
    }

    .avatar {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        margin: -80px auto 24px;
        border: 4px solid white;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .user-info {
        width: 100%;
        margin-top: 15px;
    }

    .user-info>div {
        padding: 15px;
        margin: 15px 0;
        background: #f5f5f5;
        border-radius: 12px;
        font-size: 14px;
    }

    .user-id {
        color: var(--primary);
        font-weight: 600;
        font-family: 'JetBrains Mono', monospace;
    }

    .social-status {
        font-size: 16px;
        background: #ffeef0;
        color: #4a4a4a;
    }

    .master {
        color: var(--secondary);
        font-weight: 600;
        padding-left: 28px;
        position: relative;
    }

    .master::before {
        content: '👑';
        position: absolute;
        left: 8px;
        top: 50%;
        transform: translateY(-50%);
    }
</style>

<body>
    <div class="header">
        <h1>✨ 奴隶市场 ✨</h1>
    </div>

    <div class="card-container">
        {{each info item}}
        <div class="card">
            <img class="avatar" src="http://q1.qlogo.cn/g?b=qq&nk={{item.id}}&s=100" alt="头像">
            <div class="user-info">
                <div>
                    👤 {{item.name}}
                </div>
                <div class="user-id">
                    🆔 {{item.id}}
                </div>
                <div class="social-status">
                    💰 身价: {{item.socialStatus}}
                </div>
                <div class="master">
                    👑 主人: {{item.master || '自由身'}}
                </div>
            </div>
        </div>
        {{/each}}
    </div>
</body>